<template>
  <div class="itemize">
      <div class="itemize-nav">
        <div class="itemize-item" v-for="(item,index) in itemName" :key="index"  @click="changFood(index)">
          <div class="itemize-box">
              <div>
                  <a href=""><img src="../../assets/img/sortimg/store_in_01.png" alt=""></a>
              </div>
              <div class="nav-name">{{item.name}}</div>
          </div>
          <div class="quan-none">
             <img src="../../assets/img/sortimg/forest_in_list_bg.png" alt="">
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import { request } from "../../network/request";

export default {
    name:"Itemize",
    data() {
        return {
            itemName:[{
                name:'所有美食',
                img:''
            },{
                name:'中式菜系',
                img:''
            },{
                name:'传统美食',
                img:''
            }
            ,{
                name:'外国美食',
                img:''
            },{
                name:'甜品/饮品',
                img:''
            }
            ],
            allFood:'',
            total:'',
            indexs:'',
            curPage:'1'
        }
    },
    created() {
        request({
          url: "/foot/queryAllFoot",
          params:{
            pageNum:this.curPage,
            }
          }).then((res) => {
              this.allFood = res.data.data.list
              this.total = res.data.data.total
            })
            .catch((err) => {
                console.log(err);
            });
    },
    methods: {
        changFood(index){
            this.indexs = index
            if(this.indexs!=0){
                request({
                url: "/foot/queryAllFootByFtId",
                params:{
                    ftId:this.indexs,
                    pageNum:this.curPage,
                    }
                }).then((res) => {
                    this.allFood = res.data.data.list
                    this.total = res.data.data.total
                    console.log(res.data.data.total);
                    console.log(this.allFood);
                    })
                    .catch((err) => {
                        console.log(err);
                 });
            }else{
                request({
                url: "/foot/queryAllFoot",
                params:{
                    pageNum:this.curPage,
                    }
                }).then((res) => {
                    this.allFood = res.data.data.list
                    this.total = res.data.data.total
                    })
                    .catch((err) => {
                        console.log(err);
                });
            }
        }
    },
}
</script>

<style>

.itemize{
    margin-top: 1.5rem;
    color: rgb(60, 133, 192);
}

.itemize-nav{
    display: flex;
    width: 80%;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.itemize-item{
    display: flex;
}

.nav-name{
    transition: all 0.5s;
    font-size: 0.12rem;
    cursor: pointer;
}

.itemize-item:hover .itemize-box img{
   transform: scale(1.3);
}

.itemize-item:hover .nav-name{
    transform: scale(1.3);
    margin-top: 0.1rem;
    transition: all 0.5s;
}

.itemize-box{
    width: 1rem;
    text-align: center;
    font-size: 0.2rem;
}

.itemize-box img{
    width: 0.6rem;
    height: 0.6rem;
    transition: all 0.5s;
}

.quan-none{
    position: relative;
    margin-left: -1rem;
    z-index: -1;
    opacity: 0;
    transition: all 0.5s;
}

.itemize-box:hover +.quan-none{
    opacity: 1;
    transform: scale(1.3);
}

.quan-none img{
    width: 1rem;
    height: 1rem;
}

</style>